<template>
  <div class="container">
    <h1>Welcome to My Blog</h1>
    <p class="subtitle">Latest articles from our blog</p>

    <div class="featured-article" v-if="featuredArticle">
      <h2>Featured Article</h2>
      <div class="article-card">
        <img :src="featuredArticle.imageUrl || 'https://via.placeholder.com/800x400'" alt="Featured article image">
        <div class="article-content">
          <span class="category">{{ featuredArticle.category }}</span>
          <h3><router-link :to="`/articles/${featuredArticle.id}`">{{ featuredArticle.title }}</router-link></h3>
          <p class="meta">By {{ featuredArticle.author }} • {{ formatDate(featuredArticle.createdAt) }}</p>
          <p class="excerpt">{{ featuredArticle.content.substring(0, 150) }}...</p>
          <router-link :to="`/articles/${featuredArticle.id}`" class="read-more">Read More</router-link>
        </div>
      </div>
    </div>

    <h2>Latest Articles</h2>
    <div class="article-grid">
      <div v-for="article in articles" :key="article.id" class="article-card">
        <img :src="article.imageUrl || 'https://via.placeholder.com/400x300'" alt="Article image">
        <div class="article-content">
          <span class="category">{{ article.category }}</span>
          <h3><router-link :to="`/articles/${article.id}`">{{ article.title }}</router-link></h3>
          <p class="meta">By {{ article.author }} • {{ formatDate(article.createdAt) }}</p>
          <p class="excerpt">{{ article.content.substring(0, 100) }}...</p>
          <router-link :to="`/articles/${article.id}`" class="read-more">Read More</router-link>
        </div>
      </div>
    </div>

    <div class="pagination" v-if="articles.length > 0">
      <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
      <span>Page {{ currentPage }} of {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useArticleStore } from '../store/articleStore';

const articleStore = useArticleStore();
const articles = ref([]);
const featuredArticle = ref(null);
const currentPage = ref(1);
const totalPages = ref(1);

onMounted(() => {
  fetchArticles();
});

const fetchArticles = async () => {
  await articleStore.fetchArticles();
  articles.value = articleStore.allArticles;

  // 模拟分页和精选文章
  totalPages.value = Math.ceil(articles.value.length / 6);
  if (articles.value.length > 0) {
    featuredArticle.value = articles.value[0];
  }
};

const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
};

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
    // 在实际应用中，这里应该重新获取对应页的文章
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
    // 在实际应用中，这里应该重新获取对应页的文章
  }
};
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.subtitle {
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 2rem;
}

.featured-article {
  margin-bottom: 3rem;
}

.article-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
}

.article-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.article-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.category {
  display: inline-block;
  background-color: #f0f0f0;
  color: #333;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.article-content h3 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

.article-content h3 a {
  color: #333;
  text-decoration: none;
}

.article-content h3 a:hover {
  color: #007bff;
}

.meta {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.excerpt {
  color: #444;
  flex: 1;
}

.read-more {
  display: inline-block;
  margin-top: 1.5rem;
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
}

.read-more:hover {
  text-decoration: underline;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
}

.pagination button {
  padding: 0.5rem 1rem;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 0.5rem;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination span {
  margin: 0 0.5rem;
}

@media (min-width: 768px) {
  .featured-article .article-card {
    flex-direction: row;
  }

  .featured-article .article-card img {
    width: 40%;
    height: auto;
  }

  .featured-article .article-content {
    width: 60%;
  }
}
</style>